<template>
  <q-expansion-item
    expand-separator
    :header-style="{ height: '4rem' }"
    :dark="ui.isDark"
    :class="ui.isDark ? '' : 'bg-brand'"
  >
    <template v-slot:header>
      <div class="fit row items-center">
        <div class="row justify-center items-center">
          <q-icon right size="1.5rem" color="blue-6" name="extension" />
          <q-item-section class="q-ml-md q-mr-lg q-mb-none text-h6">
            {{ $t(lang + "快捷入口") }}
          </q-item-section>
        </div>
      </div>
    </template>
    <div>
      <q-list v-for="item in menus" :key="item.title">
        <toggle-item
          :label="item.title"
          :icon="item.icon"
          v-model="item.active"
        />
      </q-list>
      <toggle-item
        v-if="mode === 'remote'"
        label="导航头IP"
        v-model="useFunctionsStore().isIP"
        icon="signal_cellular_alt"
      />
    </div>
  </q-expansion-item>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { useUiStore } from "stores/ui";
import ToggleItem from "components/setting/ToggleItem.vue";
import { useFunctionsStore } from "stores/functions";
import { computed } from "vue";

const lang = "settingIndex.TabItem.";
const ui = useUiStore();
const { mode, menuList } = storeToRefs(useFunctionsStore());
const menus = computed(() => menuList.value.filter((item) => !item.isHidden));
</script>
<style scoped>
.bg-brand {
  background-color: rgba(199, 197, 197, 0.4) !important;
}
</style>
